<template>
  <div class="dashboard-container">
    <section class="one">
        <div class="r r1"></div>
        <div class="r r1"></div>
        <div class="r r1"></div>
        <div class="r r1"></div>
        <div class="r r1"></div>
        <div class="r r1"></div>
        <div class="r r1"></div>
        <div class="r r1"></div>
        <div class="r r1"></div>
        <div class="r r1"></div>
        <div class="r r1"></div>
        <div class="r r1"></div>
        <div class="r r1"></div>
        <div class="r r1"></div>
        <div class="r r1"></div>
        <div class="r r1"></div>
        <div class="r r1"></div>
        <div class="r r1"></div>
        <div class="r r1"></div>
        <div class="r r1"></div>
      </section>
      
      <section class="two">
        <div class="r r2"></div>
        <div class="r r2"></div>
        <div class="r r2"></div>
        <div class="r r2"></div>
        <div class="r r2"></div>
        <div class="r r2"></div>
        <div class="r r2"></div>
        <div class="r r2"></div>
        <div class="r r2"></div>
        <div class="r r2"></div>
        <div class="r r2"></div>
        <div class="r r2"></div>
        <div class="r r2"></div>
        <div class="r r2"></div>
        <div class="r r2"></div>
        <div class="r r2"></div>
        <div class="r r2"></div>
        <div class="r r2"></div>
        <div class="r r2"></div>
        <div class="r r2"></div>
      </section>
      
      <section class="thr">
        <div class="r r3"></div>
        <div class="r r3"></div>
        <div class="r r3"></div>
        <div class="r r3"></div>
        <div class="r r3"></div>
        <div class="r r3"></div>
        <div class="r r3"></div>
        <div class="r r3"></div>
        <div class="r r3"></div>
        <div class="r r3"></div>
        <div class="r r3"></div>
        <div class="r r3"></div>
        <div class="r r3"></div>
        <div class="r r3"></div>
        <div class="r r3"></div>
        <div class="r r3"></div>
        <div class="r r3"></div>
        <div class="r r3"></div>
        <div class="r r3"></div>
        <div class="r r3"></div>
      </section>
      
      <section class="for">
        <div class="r r4"></div>
        <div class="r r4"></div>
        <div class="r r4"></div>
        <div class="r r4"></div>
        <div class="r r4"></div>
        <div class="r r4"></div>
        <div class="r r4"></div>
        <div class="r r4"></div>
        <div class="r r4"></div>
        <div class="r r4"></div>
        <div class="r r4"></div>
        <div class="r r4"></div>
        <div class="r r4"></div>
        <div class="r r4"></div>
        <div class="r r4"></div>
        <div class="r r4"></div>
        <div class="r r4"></div>
        <div class="r r4"></div>
        <div class="r r4"></div>
        <div class="r r4"></div>
      </section>
      
      <section class="fiv">
        <div class="r r5"></div>
        <div class="r r5"></div>
        <div class="r r5"></div>
        <div class="r r5"></div>
        <div class="r r5"></div>
        <div class="r r5"></div>
        <div class="r r5"></div>
        <div class="r r5"></div>
        <div class="r r5"></div>
        <div class="r r5"></div>
        <div class="r r5"></div>
        <div class="r r5"></div>
        <div class="r r5"></div>
        <div class="r r5"></div>
        <div class="r r5"></div>
        <div class="r r5"></div>
        <div class="r r5"></div>
        <div class="r r5"></div>
        <div class="r r5"></div>
        <div class="r r5"></div>
      </section>
  </div>
</template>
<script>
import { gsap } from "gsap";
export default {
  mounted(){
      gsap.fromTo('.r1', {y:-100}, {
        y: 100,
        backgroundColor: "hsla(0, 0%, +=100%)",
        ease: 'sine.inOut',
        duration: 2,
        rotation: 180,
        stagger: {
          amount: 1,
          repeat: -1,
          yoyo: true,
        }
      }).progress(0)
      
      gsap.fromTo('.r2', {y:-100}, {
        y: 100,
        backgroundColor: "hsla(0, 0%, +=100%)",
        ease: 'sine.inOut',
        duration: 2,
        rotation: 180,
        stagger: {
          amount: 1,
          repeat: -1,
          yoyo: true,
        }
      }).progress(0.2)
      
      gsap.fromTo('.r3', {y:-100}, {
        y: 100,
        backgroundColor: "hsla(0, 0%, +=100%)",
        ease: 'sine.inOut',
        duration: 2,
        rotation: 180,
        stagger: {
          amount: 1,
          repeat: -1,
          yoyo: true,
        }
      }).progress(0.4)
      
      gsap.fromTo('.r4', {y:-100}, {
        y: 100,
        backgroundColor: "hsla(0, 0%, +=100%)",
        ease: 'sine.inOut',
        duration: 2,
        rotation: 180,
        stagger: {
          amount: 1,
          repeat: -1,
          yoyo: true,
        }
      }).progress(0.6)
      
      gsap.fromTo('.r5', {y:-100}, {
        y: 100,
        backgroundColor: "hsla(0, 0%, +=100%)",
        ease: 'sine.inOut',
        duration: 2,
        rotation: 180,
        stagger: {
          amount: 1,
          repeat: -1,
          yoyo: true,
        }
      }).progress(0.8)
  },
    methods:{
    }
}
</script>
<style lang="scss" scoped>
  .dashboard-container {
    margin: 0;
    padding: 0;
    display: grid;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
  }
  
  section {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: flex;
  }
  
  .r {
    width: 5vw;
    height: 5vw;
    background-color: hsl(0deg 0% 0%);
  }
</style>
